<template>
  <div>
    <van-nav-bar fixed title="裂变海报提醒" left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top remind">
      <div class="bg-white br-40 mg-32">
        <van-cell center title="裂变签到提醒" class="btlr-40 btrr-40 ptb-30">
          <template #right-icon>
            <van-switch v-model="checked" @change="change" active-color="#F7762C" size="22" />
          </template>
        </van-cell>
        <van-cell title="提醒时间" class="bblr-40 bbrr-40 ptb-30" is-link :value="time" @click="openDateSelect" />
      </div>
    </div>
    <van-popup v-model="dateSelect" position="bottom" @click-overlay="clickOverlay">
      <van-datetime-picker v-model="currentTime" type="time" title="选择时间" @cancel="clickOverlay" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>

<script>
import utils from 'utils/utils'
import { GetImagePosterRemind, AddImagePosterRemind } from 'api/poster'
export default {
  components: {},
  data() {
    return {
      checked: true,
      dateSelect: false,
      currentTime: '09:00',
      time: ''
    }
  },
  computed: {},
  created() {
    this.GetImagePosterRemind()
  },
  methods: {
    GetImagePosterRemind() {
      GetImagePosterRemind().then(res => {
        if (res) {
          this.time = res.Data.RemindTime
          this.currentTime = res.Data.RemindTime
          this.checked = res.Data.Enable
        }
      })
    },
    change() {
      this._AddImagePosterRemind()
    },
    _AddImagePosterRemind() {
      AddImagePosterRemind({ time: this.time, enable: this.checked }).then(res => {
        if (res) {

        }
      })
    },
    openDateSelect() {
      this.dateSelect = true
    },
    onConfirm(value) {
      this.time = value
      this.dateSelect = false;
      this._AddImagePosterRemind()
    },
    clickOverlay() {
      this.dateSelect = false
    }
  },
  mounted() {}
}
</script>
<style>
.remind .van-cell--clickable:active {
  background: none !important;
}
</style>
